<template>
	<view class="container-gray" style="margin-bottom: 100upx;">
		<image class="main-img" :src="info.mainImgUrl" />
		<view style="padding: 30upx 40upx;background: #FFFFFF;">
			<view class="course-title">{{info.title}}</view>
			<view style="margin-top: 30upx;margin-bottom: 10upx;font-size: 24upx;display: flex;align-items: center;">
				<image class="icon" src="../../static/icon/icon-see.png" />
				<view style="margin-right: 40upx;">{{info.entryCount}}</view>
				<image class="icon" src="../../static/icon/icon-share.png" />
				<view style="margin-right: 40upx;">{{info.shareCount}}</view>
				<image class="icon" src="../../static/icon/icon-collect-black.png" />
				<view>{{info.collectCount}}</view>
			</view>
			<view class="time-place-info">
				<image class="solid-icon" src="../../static/icon/icon-time-solid.png" />
				课程时间：{{info.trainStartTime}} -
				{{info.trainEndTime}}
			</view>
			<view class="time-place-info">
				<image class="solid-icon" src="../../static/icon/icon-place-solid.png" />
				上课地点：{{info.trainPlace}}
			</view>
		</view>
		<view class="info-box">
			<view class="title">
				<image class="icon-sign" src="../../static/icon/icon-sign.png" />
				<view>课程介绍</view>
			</view>
			<view style="font-size: 24upx;margin-left: 14upx;margin-top: 18upx;">
				<rich-text :nodes="info.trainContent"></rich-text>
			</view>
		</view>
		<view class="info-box" v-if="user">
			<view class="title">
				<image class="icon-sign" src="../../static/icon/icon-sign.png" />
				<view>已报名</view>
			</view>
			<scroll-view scroll-x>
				<view style="display: flex;">
					<view v-for="(item,index) in user" :key="index" style="text-align: center;margin: 20upx 10upx;">
						<image :src="item.headPath?item.headPath:'/static/logo/logo1024x1024.png'" style="width: 80upx;height: 80upx;border-radius: 50%;border: 1px solid #DEE2ED;" />
						<view style="font-size:20upx;color: #222222;">{{item.realname}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="info-box">
			<view class="title">
				<image class="icon-sign" src="../../static/icon/icon-sign.png" />
				<view>评论</view>
			</view>
			<view v-if="comment.length>0">
				<view v-for="(item,index) in comment" :key="index" style="border-bottom: 1px solid #DEE2ED;padding: 20upx;">
					<view style="display: flex;align-items: center;">
						<image :src="item.headUrl?item.headUrl:'/static/logo/logo1024x1024.png'" style="width: 60upx;height: 60upx;border-radius: 50%;border: 1px solid #DEE2ED;" />
						<view style="margin-left: 10upx;">
							<view style="font-size:26upx;color: #222222;">{{item.realName}}</view>
							<view style="font-size:20upx;color: #999999;">{{item.createTime}}</view>
						</view>
					</view>
					<view style="font-size:24upx;color: #222222;margin-top: 10upx;">{{item.content}}</view>
				</view>
			</view>
			<view v-else style="text-align: center;margin-top: 20upx;font-size: 24upx;color: #999999;">快来评论吧</view>
		</view>
		<view class="comment-footer">
			<input class="comment-input" v-model="value" placeholder="我也说几句" />
			<button type="primary" class="primary post-btn" @click="makeComments">发表</button>
		</view>
	</view>
</template>

<script>
	import {
		post_md5
	} from '../../common/request'
	import {
		richText,
		setNavTitle
	} from '../../common/common'
	var coursePage = 1,
		dataPage = 1
	export default {
		data() {
			return {
				info: {},
				user: [],
				comment: [],
				trainId: '',
				isCollect: false,
				isApply: false,
				collectId: '',
				isFiexd: false,
				topLocation: '80%',
				value: '',
				count: 0
			}
		},
		onLoad(options) {
			this.trainId = options.id
			this.getTrainCourseinfo()
			this.selectApply()
		},
		methods: {
			getTrainCourseinfo() {
				const params = {
					trainId: this.trainId
				}
				post_md5('/train/getTrainCourseInfo', params).then(res => {
					this.info = res.data.trainCourse
					this.info.trainContent = richText(res.data.trainCourse.trainContent)
					this.user = res.data.userEntities
					this.comment = res.data.mapCommList
					setNavTitle(res.data.trainCourse.title)
					this.selectApply()
					this.selectCollect()
				})
			},

			// 报名
			apply() {
				const params = {
					userId: uni.getStorageSync('userId'),
					trainId: this.trainId
				}
				post_md5('/train/entryCourseByUser', params).then(res => {
					if (res.data == null) {
						uni.navigateTo({
							url: 'success'
						})
					}
				})
			},

			// 查询用户是否报名
			selectApply() {
				const params = {
					userId: uni.getStorageSync('userId'),
					trainId: this.trainId
				}
				post_md5('/train/isEntryCourseByUser', params).then(res => {
					if (res.data !== -1) {
						this.isApply = true
					}
				})
			},

			// 查询收藏信息
			selectCollect() {
				const params = {
					type: 4,
					userId: uni.getStorageSync('userId'),
					idInfo: this.trainId
				}
				post_md5('/user/isCollect', params, false).then(res => {
					if (res.data == -1) {
						this.isCollect = false
					} else {
						this.isCollect = true
						this.collectId = res.data
					}
				})
			},

			// 收藏
			collect() {
				if (this.isCollect == true) {
					const params = {
						id: this.collectId
					}
					post_md5('/user/cancelColl', params).then(res => {
						this.isCollect = false
						this.collectId = ''
						this.count++
						uni.showToast({
								title: '取消收藏',
								icon: 'none'
							},
							500
						)
					})
				} else {
					const params = {
						type: 4,
						userId: uni.getStorageSync('userId'),
						idInfo: this.trainId
					}
					post_md5('/user/collectInfo', params, false).then(res => {
						this.isCollect = true
						this.collectId = res.data
						this.count++
						uni.showToast({
								title: '收藏成功',
								icon: 'none'
							},
							500
						)
					})
				}
			},

			makeComments() {
				const params = {
					userId: uni.getStorageSync('userId'),
					trainId: this.trainId,
					content: this.value,
					trainType: 1
				}
				post_md5('/train/trainCommentByUserId', params).then(res => {
					this.value = ''
					if (res.data) {
						uni.showToast({
							title: '评价已提交，请等待后台审核',
							icon: 'none'
						})
						return
					}
					uni.showToast({
						title: '培训结束后方可进行评价',
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style>
	.main-img {
		width: 750upx;
		height: 420upx;
	}

	.course-title {
		font-size: 30upx;
		font-weight: bold;
		color: #333333;
	}

	.time-place-info {
		font-size: 24upx;
		font-weight: 400;
		color: #999999;
		margin-top: 20upx;
	}

	.info-box {
		margin-top: 1px;
		background: #ffffff;
		padding: 22upx 26upx;
	}

	.icon {
		width: 36upx;
		height: 30upx;
		margin-right: 12upx;
	}

	.solid-icon {
		width: 24upx;
		height: 24upx;
		margin-right: 10upx;
	}

	.icon-sign {
		width: 4upx;
		height: 20upx;
		margin-right: 12upx;
	}

	.title {
		display: flex;
		align-items: center;
		font-size: 26upx;
		font-weight: bold;
		color: #333333;
	}

	.comment-footer {
		background: #f5f5f5;
		height: 100upx;
		display: flex;
		width: 670upx;
		align-items: center;
		justify-content: space-between;
		padding: 0 40upx;
		position: fixed;
		bottom: 0;
	}

	.footer-icon {
		width: 44upx;
		height: 44upx;
	}

	.comment-input {
		width: 460upx;
		height: 60upx;
		background: #ffffff;
		border-radius: 30upx;
		/* color: #999999; */
		font-size: 26upx;
		line-height: 60upx;
		padding: 0 20upx;
	}

	.post-btn {
		width: 120upx;
		height: 60upx;
		border-radius: 30upx;
		font-size: 26upx;
		margin: 0;
	}
</style>
